<template>
  <section class="index-banner">
    <div class="swiper-container" ref="bannerSwiper">
      <div class="swiper-wrapper">
        <div 
          class="swiper-slide" 
          v-for="(slide, index) in bannerData" 
          :key="index"
          :style="{ '--bg-color': slide.bgColor }"
        >
          <div class="slide-content">
            <div class="slide-image">
              <img 
                :src="slide.imageUrl" 
                :alt="slide.title"
                class="banner-img"
                :class="isActiveSlide(index) ? 'active' : ''"
              >
            </div>
            <div class="slide-text">
              <h2 class="banner-title" :class="isActiveSlide(index) ? 'animate-title' : ''">
                {{ slide.title }}
              </h2>
              <p class="banner-subtitle" :class="isActiveSlide(index) ? 'animate-subtitle' : ''">
                {{ slide.subtitle }}
              </p>
              <div class="banner-cta" :class="isActiveSlide(index) ? 'animate-cta' : ''">
                <el-button type="primary" size="large" :href="slide.ctaLink">
                  {{ slide.ctaText }}
                  <i class="iconfont icon-arrow-right"></i>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页器 -->
      <div class="banner-pagination">
        <div class="pagination-bullets">
          <button 
            v-for="(slide, index) in bannerData" 
            :key="index"
            class="pagination-bullet"
            :class="{ active: currentSlide === index }"
            @click="goToSlide(index)"
            :aria-label="`切换到第${index+1}张幻灯片`"
          >
            <span class="bullet-number">{{ index + 1 }}</span>
            <span class="bullet-line"></span>
          </button>
        </div>
      </div>
      
      <!-- 前后切换按钮 -->
      <div class="banner-navigation">
        <button 
          class="nav-button prev" 
          @click="prevSlide"
          aria-label="上一张"
        >
          <i class="iconfont icon-arrow-left"></i>
        </button>
        <button 
          class="nav-button next" 
          @click="nextSlide"
          aria-label="下一张"
        >
          <i class="iconfont icon-arrow-right"></i>
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import Swiper from 'swiper'
import { Navigation, Pagination, Autoplay } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

// 轮播图数据
const bannerData = [
  {
    imageUrl: '@/assets/images/bulding-bg.jpg',
    title: '创新科技引领未来',
    subtitle: '专注于提供高质量产品与解决方案',
    ctaText: '了解更多',
    ctaLink: '/about-furui',
    bgColor: '#0A2463'
  },
  {
    imageUrl: '@/assets/images/bulding-bg.jpg',
    title: '全球布局战略',
    subtitle: '覆盖五大洲的产品服务网络',
    ctaText: '查看全球分布',
    ctaLink: '/products',
    bgColor: '#3E92CC'
  },
  {
    imageUrl: '@/assets/images/bulding-bg.jpg',
    title: '可持续发展承诺',
    subtitle: '绿色生产与环境保护的先行者',
    ctaText: '我们的责任',
    ctaLink: '/core-technology',
    bgColor: '#2C5F2D'
  }
]

// 响应式状态
const swiperInstance = ref(null)
const currentSlide = ref(0)
const bannerSwiper = ref(null)

// 判断当前幻灯片是否激活
const isActiveSlide = (index) => {
  return currentSlide.value === index
}

// 初始化Swiper
const initSwiper = () => {
  if (swiperInstance.value) {
    swiperInstance.value.destroy()
  }
  
  swiperInstance.value = new Swiper(bannerSwiper.value, {
    modules: [Navigation, Pagination, Autoplay],
    loop: true,
    speed: 1000,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    navigation: {
      nextEl: '.banner-navigation .next',
      prevEl: '.banner-navigation .prev'
    },
    pagination: {
      el: '.banner-pagination',
      clickable: true
    },
    on: {
      slideChange: () => {
        if (!swiperInstance.value || swiperInstance.value.destroyed) return
        // 更新当前幻灯片索引（考虑loop模式）
        const realIndex = swiperInstance.value.realIndex
        currentSlide.value = realIndex % bannerData.length
      },
      beforeTransitionStart: () => {
        // 重置所有动画类
        document.querySelectorAll('.banner-title, .banner-subtitle, .banner-cta').forEach(el => {
          el.classList.remove('animate-title', 'animate-subtitle', 'animate-cta')
        })
      },
      transitionEnd: () => {
        // 为当前幻灯片添加动画类
        const realIndex = swiperInstance.value.realIndex
        const current = realIndex % bannerData.length
        const activeSlide = document.querySelectorAll('.swiper-slide')[realIndex]
        
        if (activeSlide) {
          activeSlide.querySelector('.banner-title')?.classList.add('animate-title')
          activeSlide.querySelector('.banner-subtitle')?.classList.add('animate-subtitle')
          activeSlide.querySelector('.banner-cta')?.classList.add('animate-cta')
        }
      }
    }
  })
}

// 切换到指定幻灯片
const goToSlide = (index) => {
  if (swiperInstance.value) {
    swiperInstance.value.slideToLoop(index)
  }
}

// 上一张/下一张
const prevSlide = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slidePrev()
  }
}

const nextSlide = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slideNext()
  }
}

// 监听窗口大小变化，重新初始化Swiper
const handleResize = () => {
  initSwiper()
}

onMounted(() => {
  initSwiper()
  window.addEventListener('resize', handleResize)
  
  // 初始动画
  setTimeout(() => {
    document.querySelector('.banner-title')?.classList.add('animate-title')
    document.querySelector('.banner-subtitle')?.classList.add('animate-subtitle')
    document.querySelector('.banner-cta')?.classList.add('animate-cta')
  }, 300)
})

onUnmounted(() => {
  if (swiperInstance.value) {
    swiperInstance.value.destroy(true, true)
    swiperInstance.value = null
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped lang="scss">
.index-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  
  .swiper-slide {
    position: relative;
    overflow: hidden;
    
    .slide-content {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    .slide-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      
      .banner-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 7s ease;
        opacity: 0;
        transform: scale(1.05);
        
        &.active {
          opacity: 1;
          transform: scale(1.1);
        }
      }
    }
    
    .slide-text {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 10%;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      
      .banner-title {
        font-size: 4rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 20px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateX(-50px);
        
        &.animate-title {
          animation: slideInLeft 1s ease forwards 0.3s;
        }
      }
      
      .banner-subtitle {
        font-size: 1.5rem;
        color: #ffffff;
        margin-bottom: 30px;
        max-width: 800px;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateX(-50px);
        
        &.animate-subtitle {
          animation: slideInLeft 1s ease forwards 0.6s;
        }
      }
      
      .banner-cta {
        opacity: 0;
        transform: translateX(-50px);
        
        &.animate-cta {
          animation: slideInLeft 1s ease forwards 0.9s;
        }
        
        .el-button {
          padding: 12px 30px;
          font-size: 16px;
          border-radius: 0;
          background-color: #D8315B;
          border-color: #D8315B;
          
          &:hover {
            background-color: #b92a4c;
            border-color: #b92a4c;
          }
          
          .iconfont {
            margin-left: 8px;
          }
        }
      }
    }
  }
  
  // 分页器样式
  .banner-pagination {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
    
    .pagination-bullets {
      display: flex;
      gap: 20px;
    }
    
    .pagination-bullet {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: none;
      border: none;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.3s ease;
      
      &.active {
        opacity: 1;
      }
      
      .bullet-number {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(255, 7, 58, 0.12);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: all 0.3s ease;
        
        .pagination-bullet.active & {
          background-color: #D8315B;
        }
      }
      
      .bullet-line {
        width: 40px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.5);
        transition: all 0.5s ease;
        
        .pagination-bullet.active & {
          background-color: #ffffff;
          width: 60px;
        }
      }
    }
  }
  
  // 导航按钮
  .banner-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 10;
    
    .nav-button {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      border: none;
      color: #ffffff;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.4);
        transform: scale(+1.1);
      }
      
      .iconfont {
        font-size: 20px;
      }
      
      &.prev {
        .iconfont {
          margin-right: 5px;
        }
      }
      
      &.next {
        .iconfont {
          margin-left: 5px;
        }
      }
    }
  }
}

// 动画关键帧
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 响应式样式
@media (max-width: 1200px) {
  .index-banner {
    .slide-text {
      .banner-title {
        font-size: 3.5rem;
      }
    }
  }
}

@media (max-width: 992px) {
  .index-banner {
    min-height: 500px;
    
    .slide-text {
      .banner-title {
        font-size: 2.8rem;
      }
      
      .banner-subtitle {
        font-size: 1.3rem;
      }
    }
    
    .banner-navigation {
      .nav-button {
        width: 50px;
        height: 50px;
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 768px) {
  .index-banner {
    min-height: 400px;
    
    .slide-text {
      .banner-title {
        font-size: 2rem;
      }
      
      .banner-subtitle {
        font-size: 1.1rem;
        margin-bottom: 20px;
      }
      
      .banner-cta {
        .el-button {
          padding: 10px 24px;
          font-size: 14px;
        }
      }
    }
    
    .banner-pagination {
      bottom: 30px;
    }
    
    .banner-navigation {
      padding: 0 15px;
      
      .nav-button {
        width: 40px;
        height: 40px;
      }
    }
  }
}

@media (max-width: 576px) {
  .index-banner {
    min-height: 350px;
    
    .slide-text {
      .banner-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
      }
      
      .banner-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
      }
    }
    
    .banner-pagination {
      .pagination-bullets {
        gap: 15px;
      }
      
      .pagination-bullet {
        .bullet-number {
          width: 24px;
          height: 24px;
          font-size: 12px;
        }
        
        .bullet-line {
          width: 30px;
        }
        
        &.active .bullet-line {
          width: 45px;
        }
      }
    }
  }
}
</style>